<template>
    <div>
        <li class="list-group-item" :class="Color"><slot></slot> </li>
            <small class="badge  float-right" :class="Badge">{{ user }} {{ time }}</small>
        
    </div>
</template>

<script>
    export default {
        props:['color','user','time'],
        computed:{
            Color (){
                return 'list-group-item-'+ this.color
            },
             Badge (){
                return 'badge-'+ this.color
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
